<!DOCTYPE html>
<html lang="zh-CN" xmlns:th="http://www.thymeleaf.org">
<head>
    <link rel="stylesheet" type="text/css" th:href="@{/css/swiper-bundle.min.css}">
    <title>云沾衣诗词网-入云深处亦沾衣</title>
    <meta name="description" content="在这读几首诗，采几片云"/>
    <meta name="author" content="长亭残木"/>
    <meta name="keywords" content="诗词平台,传统文化,诗词,古诗">
    <meta name="applicable-device" content="pc,mobile">
    <th:block th:insert="~{common/header::head}"></th:block>
    <link rel="stylesheet" type="text/css" th:href="@{/css/main.css}">
    <script type="text/javascript" charset="utf-8" th:src="@{/js/swiper-bundle.min.js}"></script>
    <link rel="stylesheet" type="text/css" th:href="@{/css/index.css}">
</head>
<body>
<div th:insert="~{common/header:: index_nav}"></div>

<div class="container full">
    <div style="padding: 10px">
        <div class="row">
            <div class="col-lg-4 col-md-6">
                <div class="swiper mySwiper">
                    <div class="swiper-wrapper">
                        <div class="swiper-slide" th:each="part : ${partList}">
                            <div class="part-card" th:onclick="|toDetail(${part.poetryId})|">
                                <div class="part">
                                    <div class="content">
                                            <span style="white-space: pre-wrap;"
                                                  th:text="${ part.partContent }"></span>
                                    </div>
                                </div>

                                <div class="source">
                                    <div class="content" th:text="${part.source}">
                                    </div>
                                    <img style="width: 20px;height: 20px" th:src="@{/img/ic_launcher.png}">
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-lg-5 col-md-6">
                <div style="height:28rem" class="card">
                    <div class="card-header stress">
                        今日诗词
                    </div>
                    <div class="card-body">
                        <a th:href="'/poetry/'+${indexPoetry.poetryId}" style="font-size: x-large"
                           th:text="${indexPoetry.poetryTitle}"></a>
                        <div style="margin-top: 20px;margin-bottom: 20px ">
                            [<a style="color: #580000" target="_blank"
                                th:href="@{/index/poetry/(dynasty=${indexPoetry.dynastyId})}"
                                th:text="${indexPoetry.poetryDynasty}"></a>]
                            <a style="color: #580000" th:href="@{'/author/'+${indexPoetry.authorId}}"
                               th:text="${indexPoetry.poetryAuthor}"
                            ></a>
                        </div>
                        <div class="poetry-content">
                            <span  style="white-space: pre-wrap;"
                                  th:text="${indexPoetry.poetryContent}"></span>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-lg-3 col-md-auto">
                <div class="card" style="height: 28rem;">
                    <div class="card-header stress">
                        搜索排行榜
                    </div>
                    <div class="card-body">
                        <div class="top-10">
                            <ul>
                                <li th:each="hotWord:${hotWordList}"><a th:text="${hotWord.value}" th:href="@{/search/(keyword=${hotWord.value})}"></a></li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-lg-9 col-md-6 col-sm-12">
                <div style="min-height:44rem" class="card">
                    <div class="card-header stress">
                        推荐诗词
                    </div>
                    <div class="card-body row">
                        <div th:each="poetry: ${poetryList}" class="col-md-6 col-lg-6 col-sm-12 text-truncate">
                            [<a class="poetry-a" th:text="${poetry.poetryDynasty}" th:href="@{/index/poetry/(dynasty=${poetry.dynastyId})}">唐代</a>]·
                            <a class="poetry-a" th:text="${poetry.poetryAuthor}" th:href="'/author/'+${poetry.authorId}">卢纶</a>
                            《<a class="poetry-a" th:text="${poetry.poetryTitle}" th:href="'/poetry/'+${poetry.poetryId}">过仙游寺</a>》
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-lg-3 col-md-6 col-sm-12">
                <div class="card">
                    <div class="card-header stress">
                        著名诗人
                    </div>
                    <div class="card-body p-2">
                        <ul class="p-1 list-unstyled d-flex flex-wrap">
                            <li th:each="author:${hotAuthorList}" class="p-1">
                                <a class="link-success"
                                   th:href="'/author/'+${author.id}"
                                   th:text="${author.authorName}"></a></li>
                        </ul>
                    </div>
                </div>

                <div class="card">
                    <div class="card-header stress">
                        推荐诗人
                    </div>
                    <div class="card-body">
                        <ul class="p-1 list-unstyled d-flex flex-wrap">
                            <li class="p-1" th:each="author:${authorList}">
                                <a th:href="'/author/'+${author.id}" class="link-info" th:text="${author.authorName}"></a>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<div th:insert="~{common/footer ::home-footer}"></div>
</body>
<script>
    var swiper = new Swiper(".mySwiper", {
        effect: "cards",
        grabCursor: true,
        //等同于以下设置
        autoplay: {
            delay: 5000,
            stopOnLastSlide: false,
            disableOnInteraction: false,
        },
    });
    toDetail = function (poetryId) {
        document.location.href = "/poetry/" + poetryId
    }
</script>
</html>
